<template>
  <div class="layout" ref="main">
      <p>该网上拍卖系统"著作权"归属--华北水利水电大学 信息工程学院 计算机科学与技术专业：蒋维</p>
      <p>学校：<a href="https://www.ncwu.edu.cn/index.htm">华北水利水电大学</a></p>
      <p>学院：<a href="https://m.eqxiu.com/s/tyfZHsHL?bt=yxy">信息工程学院</a></p>
      <p>如系统存在哪些不足，随时联系：<span>QQ:480364454</span></p>
      <p>欢迎大家提出宝贵的建议！！你的完美体验将是我最大的荣誉</p>
  </div>
</template>

<script>
export default {
    name:'LayoutShouye',
    data() {
        return {
            time:null
        }
    },
    mounted() {
        this.rain()
        console.log("route",this.$route.fullPath,this.$route.fullPath !== '/sysout/sysoutshouye')
    },
    methods: {
        rain(){
            this.time = setInterval(()=> {
                // console.log(this.$refs.main)
                //创建rain元素
                var rain = document.createElement('div')

                //初始化 rain属性
                rain.style.position = 'absolute' //设置固定定位
                rain.style.height = '100px' //雨滴的高度
                rain.style.width = '2px' //雨滴的宽度
                rain.style.backgroundColor='white' //雨滴的颜色
                rain.style.filter = 'blur(1px)' //模糊 阴影
                rain.style.top = '0px' //雨滴距离屏幕的高度
                var x = this.$refs.main.offsetWidth

                rain.style.left = Math.random() * x + 'px' //随机化位置 900:分辨率 宽度
                rain.style.opacity = parseInt(Math.random() * 10) / 10 + "" //随机化透明度

                //向body里添加节点 rain
                this.$refs.main.appendChild(rain)
                var timer = setInterval(function () {
                    var height = parseInt(rain.style.top)
                    var k = 1;
                    k++;
                    rain.style.top = height + 5 * Math.pow(k, 2) + 'px' //模拟重力加速 pow:幂 k的2次方

                    //当雨滴到达底部后消失并清除子节点rain
                    if (rain.style.top >= '810px') {
                        clearInterval(timer)
                        rain.parentNode.removeChild(rain)
                    }

                }, 10) //每隔10ms 雨滴下一次   

            }, 10) //每隔10ms生成水滴
            // if(this.$route.fullPath !== '/sysout/sysoutshouye'){
            //     clearInterval(time)
            // }
        }
    },
    beforeDestroy() {
        clearInterval(this.time);        
        this.time = null;
    },
}
</script>

<style scoped>
    .layout{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 830px;
        overflow: hidden;
        background-image: url("./img/bg.png");
        background-size: 100%;
        position: relative;
        padding-top: 140px;
        padding-left: 100px;
    }
    .layout p{
        height: 40px;
        font-size: 18px;
        font-family: "楷体";
        font-weight: bold;
        color: #fff;
    }
    a:hover{
        color: red;
    }
</style>